<template>
  <div>
    <!-- 修改数组 -->
    <!-- <ul>
      <li v-for="(item,index) in nameArr" :key="index">{{item}}</li>
    </ul>
    <p>
      <button @click="editFn">修改-胡韦臻</button>
    </p>-->

    <!-- 修改对象 -->
    <p>{{user.name}}--{{user.age}}--{{user.sex}}</p>
    <button @click="addSex">添加性别</button>
    <button @click="delAge">删除年龄</button>
  </div>
</template>

<script>
// vue2 的问题:
// 01:  通过下标修改数据在vue2中监听不到
import Vue from "vue";
const { set } = Vue;
export default {
  data() {
    return {
      nameArr: ["胡韦臻", "姜长跃", "王雨杰"],
      user: {
        name: "尚豪",
        age: 20
      }
    };
  },
  methods: {
    editFn() {
      //   this.nameArr[0] = "胡歌";
      //   console.log(this.nameArr);
      //   console.log(this);
      //   this.$set(this.nameArr, 0, "胡歌");
      //   this.nameArr.splice(0, 1, "胡歌");
      //   console.log(this.nameArr);
    },
    addSex() {
      //   this.user.sex = "男";
      // console.log(this.user);
      this.$set(this.user, "sex", "男");
      console.log(this.user);
    },
    delAge() {
      //   delete this.user.age;
      this.$delete(this.user, "age");
      console.log(this.user);
    }
  }
};
</script>
<style scoped>
</style>